<template>
  <el-container class="app-div" id="app">
    <el-aside :style="'width: ' + (isCollapse ? '64' : '240') + 'px !important;'" v-show="isWindow" class="change">
      <nav-menu></nav-menu>
    </el-aside>
    <el-container class="change">
      <el-header v-show="isWindow">
        <nav-top></nav-top>
      </el-header>
      <el-main class="no-padding">
        <el-container class="page-div">
          <el-header class="header-history" v-show="isWindow">
            <nav-history></nav-history>
          </el-header>
          <el-main :class="[isWindow ? 'main-style' : '']" :style="isWindow ? '' : 'padding: 0px;'">
            <transition name="fade-transform" mode="out-in">
              <router-view></router-view>
            </transition>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import '@/common/css/global.css'
import NavTop from '@/components/nav-top'
import NavMenu from '@/components/nav-menu'
import NavHistory from '@/components/nav-history'
export default {
  name: 'App',
  components: {
    "nav-top": NavTop,
    "nav-menu": NavMenu,
    "nav-history": NavHistory
  },
  computed: {
    isCollapse() {
      return this.$store.state.menu.isCollapse
    },
    isWindow() {
      return this.$route.path != "/login"
    }
  }
}
</script>

<style scoped>
.page-div {
  height: 100%;
}

.header-history {
  height: 34px !important;
}

.main-style {
  background-color: rgb(248, 248, 248);
}

.no-padding {
  padding: 0;
}

.change {
  transition: .3s;
}
</style>
